<template>
  <a-modal
    :title="title"
    :visible="openDialog"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="confirmBtn('commonForm')"
    @cancel="mainDialogClose('commonForm')"
  >
    <a-form-model ref="commonForm" :model="formData" :rules="rules" v-bind="layout">
      <a-form-model-item label="名称" prop="newName">
        <a-auto-complete
          v-if="!data.isStep"
          ref="input"
          v-model="formData.newName"
          @pressEnter="confirmBtn('commonForm')"
          :data-source="dataSource"
          placeholder="请输入表单项"
          @search="searchName"
        />
        <a-input v-else ref="input" v-model="formData.newName" @pressEnter="confirmBtn('commonForm')" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import api from '@/server/mouldConfig.js';

export default {
  name: 'insertStepDialog',
  props: {
    openDialog: Boolean,
    title: String,
    data: Object
  },
  components: {},
  data() {
    return {
      // username: '',
      // role: '',
      // compId: '',
      // compType: '',
      mouldId: '',
      lists: [],
      dataSource: [],
      formData: {
        newName: ''
      },
      rules: {
        newName: {
          required: true,
          min: 1,
          max: 70,
          message: '请输入1-70位之间的字符',
          trigger: 'blur',
        }
      },
      layout: {
        layout: 'horizontal',
        labelAlign: 'right',
        hideRequiredMark: true,
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
    };
  },
  watch: {
    openDialog: {
      immediate: false,
      handler: async function(newVal, oldVal) {},
    },
  },
  methods: {
    searchName(searchText) {
      api.hintStep(searchText).then(res => {
        if (res.code == 200) {
          this.dataSource = res.data;
        }
      });
    },
    mainDialogClose(formName) {
      this.$refs[formName].resetFields();
      this.$emit('update:openDialog', false);
    },
    confirmBtn(formName) {
      let _this = this;
      _this.$refs[formName].validate(async (valid) => {
        if(!valid) return 
        let { newName } = _this.formData;

        const res = await api.insertDown({
          id: this.data.id,
          newName: newName
        });
        if (res.code != 200) {
          this.$message.error('创建步骤失败');
          return;
        }
        _this.$emit('confirmRefreshData');
        _this.$refs[formName].resetFields();
        _this.$emit('update:openDialog', false);
      });
    },
  },
  mounted() {
    this.$nextTick( ()=> {
      this.$refs.input.focus()
    } )
  },
  created() {
    let { mouldId } = this.$route.query;
    this.mouldId = mouldId;
  },
};
</script>

<style scoped></style>
